<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        li {
            list-style: none;
            float: left;
        }
        
        img {
            margin: 10px;
        }
        
        #d1,
        #d2,
        #d3,
        #d4 {
            display: none;
        }
        
        body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }
        
        #tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }
    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function() {
                var x = 10;
                var y = 20;
                $("a.tooltip").mouseover(function(e) {

                    var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/><\/div>"; //创建 div 元素
                    $("body").append(tooltip); //把它追加到文档中						 
                    $("#tooltip")
                        .css({
                            "top": (e.pageY + y) + "px",
                            "left": (e.pageX + x) + "px"
                        }).show("fast"); //设置x坐标和y坐标，并且显示
                }).mouseout(function() {

                    $("#tooltip").remove(); //移除 
                }).mousemove(function(e) {
                    $("#tooltip")
                        .css({
                            "top": (e.pageY + y) + "px",
                            "left": (e.pageX + x) + "px"
                        });
                });
            })
            //]]>
    </script>
</head>

<body>
    <h2>有效果：</h2>
    <ul>
        <li>
            <a href="a1d.png" class="tooltip"><img src="a1x.png" alt="Picture 1" /></a>
        </li>
        <li>
            <a href="images/a2d.png" class="tooltip" title="Picture 2"><img src="images/a2x.png" alt="Picture 2" /></a>
        </li>
        <li>
            <a href="images/a3d.png" class="tooltip" title="Picture 3"><img src="images/a3x.png" alt="Picture 3" /></a>
        </li>
        <li>
            <a href="images/a4d.png" class="tooltip" title="Picture 4"><img src="images/a4x.png" alt="Picture 4" /></a>
        </li>
    </ul>